a<template>
    <div>
        <div
            class="input-container w-full min-h-[3.75rem]  rounded-[1.25rem] overflow-hidden flex flex-wrap items-center bg-white">
            <textarea ref="inputElement" v-model="state.content" class="resize-none outline-none w-full h-[60%] p-3
            leading-[1.5]" :name="props.name" :id="props.id" :placeholder="props.placeholder" autocorrect="true"
                rows="1" cols="1"></textarea>
            <div class="w-full min-h-[0] pl-3 pr-3">
                <div class="showPic">
                    <div class="flex flex-wrap" v-if="state.contentImg">
                        <div v-for="(item, index) in state.contentImg" :key="index"
                            class="w-[2.5rem] h-[2.5rem] m-1 relative">
                            <img :src="item" class="w-full h-full object-cover rounded-[0.625rem]" alt="" />
                            <i class="iconfont icon-close1 text-[red] absolute top-[-0.3125rem] right-[-0.3125rem] cursor-pointer" @click="delPic"></i>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="emj-sub flex justify-between items-center m-2">
            <div class="picture">
                <div class="upload-img w-[1.25rem] h-[1.25rem] border border-solid border-primary flex justify-center items-center cursor-pointer"
                    @click="openUpload">
                    <i class="iconfont icon-tupian"></i>
                </div>
            </div>
            <button @click="sub">提交</button>
        </div>

    </div>
    <Mask v-model="show" :title="'上传图片'">
        <template #upload>
            <upload v-model="state.contentImg"></upload>
        </template>
    </Mask>


</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, reactive } from 'vue'
import upload from '../upload/index.vue'
import Mask from '../mask/mask.vue'
import { useAuthStore } from '@/stores/user'
const authStore = useAuthStore()
const $emit = defineEmits(['submit'])
const props = defineProps({
    name: {
        type: String,
        required: true,
        default: 'blog-input'
    },
    id: {
        type: String,
        required: false,
        default: ''
    },
    placeholder: {
        type: String,
        required: false,
        default: '下面我简单喵两句~'
    }
})
interface pushForm {
    id?: number | string;         
    articleId: number | string;   
    // articlePostId: number | string;
    userId: number | string;
    nickName: string | string;
    content: string | string;
    contentImg?: string[];  
    headId?: number | string;
    parentName?: string | string;
}
const show = ref(false)
const inputElement = ref()
// 提交的表单
const state: pushForm = reactive({
    articleId: '', // 文章id
    // articlePostId: '', // 评论所属id(文章id)
    userId: authStore.userId as any, // 发送评论的用户id 
    nickName: authStore.displayName,
    parentName: '', // 回复给的昵称
    content: "",
    contentImg: [],
    headId: '', // 所属头部评论的id
    
});
onMounted(() => {
    if (inputElement.value && inputElement.value.scrollHeight > 0) {
        inputElement.value.addEventListener('input', () => {
            inputElement.value.style.height = 'auto'
            inputElement.value.style.height = inputElement.value.scrollHeight + 'px'
        })
    }
});
const sub = () => {
    // 上传事件
    $emit('submit', state)
}
const openUpload = () => {
    // 控制 Mask 的显示与隐藏
    show.value = true;
}
const delPic = (index:any)=> {
    // 删除图片
    state.contentImg ? state.contentImg.splice(index, 1) :''
}
const reset = () => {
    // 重置
    state.content = ''
    state.contentImg = []
    if (inputElement.value) {
        inputElement.value.style.height = 'auto'
        inputElement.value.style.height = '3.75rem'
    }
}
defineExpose({
    reset
})
</script>

<style scoped></style>